<template>
	<view class="search-page">
		<view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
	            <!-- 这里是状态栏 -->
		</view>
		<fui-toast ref="toast"></fui-toast>
		<view class="search-body">
			<view class="search-body-content">
				<view class="search-banner-body">
					<view class="search-banner">
						<view class="banner-left">
							<image src="../../static/images/arrow-left-black.png" mode="heightFix" @click="backToIndex()"></image>
							<view class="input-content" >
								<input type="text" v-model="userInputInfo" placeholder="请输入搜索词" focus="true"/>
							</view>
						</view>
						<view class="banner-right">
							<view class="clean-input-all" v-show="showCleanBtnFlag" @click="cleanAll">
								<image src="../../static/images/clean-input.png" mode="heightFix"></image>
							</view>
							<image src="../../static/images/search-black.png" mode="heightFix" @click="searchArticleByTitle"></image>
						</view>
					</view>
				</view>
	
				<view class="search-content">
					<view class="search-content-item" v-for="(item,index) in searchReturnList.value " :key="index">
						<view class="search-content-item-content" @click="getArticleContent(index)">
							<view class="article-title">
								<text>{{item.title}}</text>
								<!-- <text>{{item}}</text> -->
							</view>
							<view class="article-content">
								<text>{{item.contentRendered}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- <h1>{{searchReturnList.List}}</h1> -->
				
				
				
			</view>
			
			
	
		</view>
	</view>
</template>

<script setup>
	import { reactive,ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const searchReturnList = reactive({
		
	})
	const iStatusBarHeight = ref(0)
	onLoad((option)=>{
		iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		console.log(option);
		searchReturnList.value = JSON.parse(option.searchReturnList)
		 console.log(searchReturnList.value[0].articleId);
	})
	
	const backToIndex = () =>{
		uni.navigateBack({
			
			success() {
				
			}
		})
	}
	
	
	const getArticleContent = (key) =>{
		
		// console.log();
				let josnString = JSON.stringify(searchReturnList.value[key])
				uni.navigateTo({
					url:"/pages/article/article?articleInfo="+josnString
				})
	}
	
</script>

<style lang="scss" scoped>

	uni-image{
		height: 100%;
	}
	
	uni-button[type="default"]{
		font-size: 25rpx;
	}
	
	button::after {
		 border: none;
	}
	
	.search-page{
		// width: 100%;
		display: flex;
		flex-direction: column;
		// align-items: center;
		.search-body{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			.search-body-content{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 95%;
				>.search-banner-body{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					background-color: #f7f7f7;
					border-radius: 5rpx;
					>.search-banner{
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 70%;
						width: 95%;
						>.banner-left{
							height: 100%;
							display: flex;
							align-items: center;
							font-size: 35rpx;
							>.input-content{
								margin-left: 20rpx;
								width: 470rpx;
							}
						}
						>.banner-right{
							display: flex;
							// justify-content:center;
							align-items: center;
							height: 100%;
							>.clean-input-all{
								margin-right: 20rpx;;
								display: flex;
								justify-content: center;
								align-items: center;
								height: 50%;
							}
						}
					}
				}
				
				
				.search-content{
					width: 100%;
					margin-top: 20rpx;
					// height: 100%;
					// background-color: black;
					
					.search-content-item{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						margin-bottom: 15rpx;
						border-radius: 5rpx;
						/* border: 1px black solid; */
						box-shadow:  5px 5px 25px #d1d1d1,
						         -5px -5px 25px #ffffff;
					}
					.search-content-item-content{
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						width: 95%;
						.article-title{
							font-weight: 600;
							font-size: 35rpx;
							margin-bottom: 10rpx;
						}
					}
				}	
				
			}
		}
	}
</style>
